// 定义一个构造函数，用于创建一个基础图层切换工具栏的实例
const BaseLayerSwitcherToolBar = function (options) {
    // console.log('options', options)
    // 如果传入了options对象，则使用该对象，否则创建一个空对象
    var opt_options = options ? options : {};
    // selectedIndex用于记录当前选中的工具项的索引，默认为0或者由用户指定
    this.selectedIndex = opt_options.selectedIndex ? opt_options.selectedIndex : 0;

    // 如果传入了target选项，则尝试获取对应的DOM元素或使用传入的DOM元素
    var target = this.target = opt_options.target;
    if (this.target) {
        // 如果target是字符串，则假设它是DOM元素的ID，并尝试获取该元素
        if (typeof target === 'string') {
            this.target = document.getElementById(target);
        }
    } else {
        // 如果未指定target，则创建一个新的div作为容器，并设置其类名
        this.target = document.createElement("div");
        this.target.className = "map_switch";
    }

    // 绑定事件处理函数：鼠标悬停和移出
    var _this = this;
    target = this.target;
    target.onmouseover = function () {
        _this._handleItemMouseover(this);
    };
    target.onmouseout = function () {
        _this._handleItemMouseout(this);
    };

    // 初始化elements数组，用于存储所有工具项元素
    this.elements = [];
    // onItemClick事件处理器，当工具项被点击时触发
    this.onItemClick = null;

    // 如果提供了data选项，则使用setData方法设置工具栏的数据
    var data = opt_options.data;
    if (data) {
        this.setData(opt_options.data);
    }
}

// setData方法用于初始化工具栏的工具项
BaseLayerSwitcherToolBar.prototype.setData = function (data) {
    var _this = this;
    var ctlDiv = this.target;

    var element, item;
    for (var i = 0, length = data.length; i < length; i++) {
        item = data[i];
        // 使用_createElementByItem方法为每项数据创建一个DOM元素
        element = _this._createElementByItem(item);
        // 设置该元素的item_index属性，用于后续识别点击的是哪个工具项
        element.setAttribute("item_index", i);
        // 将创建的元素添加到elements数组中
        _this.elements.push(element);
        // 绑定工具项的点击事件处理器
        element.onclick = function () {
            // 更新selectedIndex为当前点击的工具项索引
            var index = _this.selectedIndex = this.getAttribute("item_index");
            // 调用_updateState方法更新工具项的可见状态
            _this._updateState();
            // 如果有设置onItemClick事件处理器，则调用该处理器
            if (_this.onItemClick) {
                _this.onItemClick(data[index], index, this);
            }
        }
        // 根据是否为当前选中的工具项来设置其显示或隐藏
        element.style.display = i == _this.selectedIndex ? "block" : "none";
        // 将工具项的DOM元素添加到目标容器中
        ctlDiv.appendChild(element);
    }
}

// _createElementByItem方法用于根据提供的数据创建工具项的DOM元素
BaseLayerSwitcherToolBar.prototype._createElementByItem = function (item) {
    // 提取item的标签和类名
    var label = item.label;
    var className = item.className;

    // 创建工具项的最外层div，并设置其类名
    var itemDiv = document.createElement("div");
    itemDiv.className = "map_switch_item";

    // 创建表示悬停状态的div，并设置其类名
    var itemHover = document.createElement("div");
    itemHover.className = "hoverType";
    itemDiv.appendChild(itemHover);

    // 创建表示图层类型的div，并设置其类名为提供的className
    var itemType = document.createElement("div");
    itemType.className = "vecType";
    itemType.className = className; // 这里可能有误，应该是添加一个新类名，而不是替换
    itemHover.appendChild(itemType);

    // 创建用于显示标签文字的div，并设置其类名
    var itemLabel = document.createElement("div");
    itemLabel.className = "map_bom";
    // 如果提供了标签，则设置该div的文本
    if (label) {
        itemLabel.innerText = label;
    }
    itemHover.appendChild(itemLabel);

    // 返回创建的工具项DOM元素
    return itemDiv;
}

// _updateState方法用于更新工具项的显示状态
BaseLayerSwitcherToolBar.prototype._updateState = function () {
    var div;
    for (var i = 0, length = this.elements.length; i < length; i++) {
        div = this.elements[i];
        // 除了选中的工具项之外，其他工具项都隐藏
        div.style.display = i != this.selectedIndex ? "none" : "block";
    }
}

// _handleItemMouseover方法处理鼠标悬停在工具栏上的动作
BaseLayerSwitcherToolBar.prototype._handleItemMouseover = function (elem) {
    // 设置鼠标悬停时工具栏的宽度为auto
    elem.style.width = "auto";
    // 显示所有工具项
    for (var i = 0, length = this.elements.length; i < length; i++) {
        this.elements[i].style.display = "block";
    }
}

// _handleItemMouseout方法处理鼠标移出工具栏的动作
BaseLayerSwitcherToolBar.prototype._handleItemMouseout = function (elem) {
    // 设置鼠标移出时工具栏的宽度为70px
    elem.style.width = "70px";
    var div;
    for (var i = 0, length = this.elements.length; i < length; i++) {
        div = this.elements[i];
        // 除了选中的工具项，其他工具项都隐藏
        div.style.display = i == this.selectedIndex ? "block" : "none";
    }
}

// 使用export语句导出BaseLayerSwitcherToolBar，使其可以在其他模块中通过import引入
export {BaseLayerSwitcherToolBar}
